<template>
  <el-dialog width="50%" v-model="dialogVisible" :before-close="handleClose" v-if="dialogVisible">
    <template #title>
      <div class="dialog-header">
        <el-steps :active="active" finish-status="success">
          <el-step title="区域选择" :icon="Edit" />
          <el-step title="比选方案配置" :icon="Edit" />
          <el-step title="场次配置" :icon="Edit" />
          <el-step title="比选方案结果" :icon="Edit" />
          <el-step title="确定区域方案" :icon="Edit" />
        </el-steps>
      </div>
    </template>
    <div class="content-box">
      <areaSelection v-if="active === 0" :schemeData="state.schemeData" :blkcd="state.blkcd"
        @getSchemeInfo="getSchemeInfo" />
      <require-schemecfg v-if="active === 1" />
      <play-config v-if="active === 2" />
      <scheme-result v-if="active === 3" />
      <sure-area v-if="active === 4" />
      <!-- <playConfig />
      <requireSchemecfg />
      <schemeResult />
      <sureArea /> -->
    </div>
    <template #footer>
      <div class="btn-group">
        <div class="btn-up" v-if="hiddenBack" @click="clickBack">
          <span>上一步</span>
        </div>
        <div v-if="!finish" class="btn-down" @click="clickNext">
          <span>下一步</span>
        </div>
        <div v-else class="btn-down" @click="clickFinish">
          <span>完成</span>
        </div>
        <div class="btn-jump" v-if="!hiddenBack" @click="clickFinish">
          <span>跳过比选</span>
        </div>
        <div class="btn-cancel" @click="handleClose">
          <span>取消</span>
        </div>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive } from 'vue'
import areaSelection from './cpns/areaSelection.vue'
import playConfig from './cpns/playConfig.vue'
import requireSchemecfg from './cpns/requireSchemecfg.vue'
import schemeResult from './cpns/schemeResult.vue'
import sureArea from './cpns/sureArea.vue'
import emitter from '@/utils/bus'
import { Edit } from '@element-plus/icons-vue'
//api
import { getSectionSchemeInfos, addSectionSchemeInfos } from '@/services/modules/compute-methods'
//pinia
import {
  useSectionInfo,
  useComputeMethods,
  useUnitInfo,
  useBlkcd
} from '@/store/modules/compute-methods.js'
import { storeToRefs } from 'pinia'
let { sectionInfo } = storeToRefs(useSectionInfo())
const dialogVisible = ref(false)
const active = ref(0)
const finish = ref(false)
const hiddenBack = ref(false)
const state = reactive({
  schemeData: [],
  blkcd: '',
  schemeDetail: {}
})
function clickNext() {
  hiddenBack.value = true
  if (active.value++ > 2) {
    finish.value = true
  }
}
//订阅
const subscribe = useUnitInfo().$subscribe(
  (mutation, state) => {
    console.log(state)
    if (state.unitShow == true && useBlkcd().status == 0) {
      dialogVisible.value = true
      openDialog(useBlkcd().blkcd)
    }
  },
  { detached: false }
)
function clickBack() {
  if (active.value-- < 2) {
    active.value = 0
    hiddenBack.value = false
  }
  finish.value = false
}
function getSchemeInfo(data) {
  state.schemeDetail = data
}
function clickFinish(data) {
  state.schemeDetail.calSeCode = useComputeMethods().schemeInfo.schemeCode
  sectionInfo.value = [...sectionInfo.value, state.schemeDetail]
  dialogVisible.value = false
  useUnitInfo().$reset()
  useBlkcd().$reset()
  saveScheme()
  // let { unitShow } = storeToRefs(useUnitInfo())
  // unitShow.value = false
}
//保存方案
function saveScheme() {
  let arr = useSectionInfo().sectionInfo
  if (arr.length < 1) {
    ElMessage({
      message: '配置断面不能为空',
      type: 'error'
    })
    return false
  }
  addSectionSchemeInfos(arr).then((res) => {
    if (res.code === 200) {
      ElMessage({
        message: '保存成功',
        type: 'success'
      })
      emitter.emit('resetSection', true)
    }
  })
}
function handleClose() {
  dialogVisible.value = false
  useUnitInfo().$reset()
  useBlkcd().$reset()
  emitter.emit('resetSection', true)
}
emitter.on('handleUpdateSection', (value) => {
  openDialog(value)
})
//打开
const openDialog = (blkcd) => {
  dialogVisible.value = true
  active.value = 0
  finish.value = false

  state.blkcd = blkcd
  getSectionSchemeInfos({ blkcd: blkcd }).then((res) => {
    if (res.code === 200) {
      state.schemeData = res.data
    }
  })
}
defineExpose({ openDialog })
</script>
<style lang="less" scoped>
.dialog-header {
  padding: 5px 25px;
  border-bottom: 1px solid #797979;
}
.btn-group {
  width: 100%;
  display: flex;
  justify-content: space-around;
  .btn-up {
    width: 200px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    border: 1px solid gray;
    background: white;
    cursor: pointer;
    span {
      color: gray;
    }
  }
  .btn-down {
    width: 200px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    background: #149bd5;
    cursor: pointer;
    span {
      color: white;
    }
  }
  .btn-jump {
    width: 200px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    background: rgb(85, 255, 47);
    cursor: pointer;
    span {
      color: white;
    }
  }
  .btn-cancel {
    width: 200px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    background: #aaaaaa;
    cursor: pointer;
    span {
      color: white;
    }
  }
}
</style>
